<div id="mixerRecipes" style="height:100%">
    <div class="ui-layout-west">
        <div class="clearfix tbl mixerRecipesTable" id="mixerRecipesTable">Left</div>
        <div>
            <button class="small" id="mRecipesAdd">Add new</button>    
            <button class="small" id="mRecipesDelete">Delete</button>    
            <button class="small" id="mRecipesSave">Save</button>    
            <button class="small" id="mRecipesCancel">Cancel</button>
        </div>
    </div>
    <div class="ui-layout-center" id="settings">
		<div class="clearfix tbl mixerDestinationTable" id="mixerDestinationTable">North</div>
        <div>
            <button class="small" id="mDestinationAdd">Add new</button>    
            <button class="small" id="mDestinationDelete">Delete</button>    
            <button class="small" id="mDestinationSave">Save</button>    
            <button class="small" id="mDestinationCancel">Cancel</button>
        </div>
    </div>
</div>
<script>
    var mixerRecipesFX = function() {
        var _self = this;
        _self.perform = function() {
            //dodavanje layout-a za parent div
            $("#mixerRecipes").layout({
                resizable: false,
                closable: false,
                west__size: ".5"

            });
            $("#mixerRecipesTable").addScroll();
            _self.loadDataFormixerRecipesTable();

            $("#mixerDestinationTable").addScroll();
            _self.loadDataFormixerDestinationTable();

            window.refreshAndSortTable = _self.refreshSortedTable;

        };
        _self.refreshSortedTable = function(table, columnName, ascDesc, callback){
            _self.table = table;

            if(table == "mixerRecipesTable")
                _self.request = 140;
            else if(table == "mixerDestinationTable")
                _self.request = 141;

            _self.columnName = columnName;
            _self.sortItem = "";
            _self.ascDesc = ascDesc;
            _self.action = "getItems";

            _self.random = Math.random();
            _self.url = "js/tableParams/" + _self.request + ".json?x=" + random;

            $.get(_self.url, function(response) {
                $(response.desc).each(function(index,value){
                    if(value.title == columnName){
                        _self.sortItem = value.param;
                        return false;
                    }
                });

                var params = {
                    request: _self.request,
                    action: _self.action,
                    sortItem: _self.sortItem,
                    ascDesc: _self.ascDesc
                };

                window.tableConstructor.generateTable(params, callback);
            });

        };

        _self.loadDataFormixerRecipesTable = function(callback) {
            var params = {
                request: 140,
                action: "getItems"
            };
            window.tableConstructor.generateTable(params, callback);
        };
        _self.loadDataFormixerDestinationTable = function(callback) {
            var params = {
                request: 141,
                action: "getItems"
            };
            window.tableConstructor.generateTable(params, callback);
        };
        _self.assignEventHandlers = function(){
            $(document).on("click", ".scrollable .tbl.mixerRecipesTable .row.data", function() {
                window.backendInterface.editItem($('.scrollable .tbl.mixerRecipesTable'),$(this),_self.loadDataFormixerRecipesTable,140);
            });
            $(document).on("click", "#mRecipesAdd", function() {
                window.backendInterface.addItem($('.scrollable .tbl.mixerRecipesTable'),_self.loadDataFormixerRecipesTable,140);
            });
            $(document).on("click", "#mRecipesDelete", function() {
                window.backendInterface.deleteItem(140);
            });
            $(document).on("click", "#mRecipesSave", function() {
                window.backendInterface.save(140);
            });
            $(document).on("click", "#mRecipesCancel", function() {
                window.backendInterface.cancel(140);
            });

            $(document).on("click", ".scrollable .tbl.mixerDestinationTable .row.data", function() {
                window.backendInterface.editItem($('.scrollable .tbl.mixerDestinationTable'),$(this),_self.loadDataFormixerDestinationTable,141);
            });
            $(document).on("click", "#mDestinationAdd", function() {
                window.backendInterface.addItem($('.scrollable .tbl.mixerDestinationTable'),_self.loadDataFormixerDestinationTable,141);
            });
            $(document).on("click", "#mDestinationDelete", function() {
                window.backendInterface.deleteItem(141);
            });
            $(document).on("click", "#mDestinationSave", function() {
                window.backendInterface.save(141);
            });
            $(document).on("click", "#mDestinationCancel", function() {
                window.backendInterface.cancel(141);
            });
        };
        _self.clearEventHandlers = function(){
            $(document).off("click", ".scrollable .tbl.mixerRecipesTable .row.data");
            $(document).off("click", "#mRecipesAdd");
            $(document).off("click", "#mRecipesDelete");
            $(document).off("click", "#mRecipesSave");
            $(document).off("click", "#mRecipesCancel");

            $(document).off("click", ".scrollable .tbl.mixerDestinationTable .row.data");
            $(document).off("click", "#mDestinationAdd");
            $(document).off("click", "#mDestinationDelete");
            $(document).off("click", "#mDestinationSave");
            $(document).off("click", "#mDestinationCancel");
        };
    };
    new mixerRecipesFX();
    if(!window.mRecipesFX){
        window.mRecipesFX = new mixerRecipesFX();
        window.mRecipesFX.perform();
        window.mRecipesFX.clearEventHandlers();
        window.mRecipesFX.assignEventHandlers();
    }
    else{
        window.mRecipesFX.perform();
        window.mRecipesFX.clearEventHandlers();
        window.mRecipesFX.assignEventHandlers();
    }
</script>